<template>
  <div class="_comments">
    <div class="page-container">
      <!-- 搜索区域 -->
      <div class="search-area">
        <el-card shadow="never">
          <el-form :inline="true" size="small">
            <el-form-item label="评论内容">
              <el-input
                v-model="search.content"
                placeholder="请输入评论内容"
                clearable
                @keyup.enter.native="searchPage">
              </el-input>
            </el-form-item>
            <el-form-item label="评论人">
              <el-input
                v-model="search.createBy"
                placeholder="请输入评论人"
                clearable
                @keyup.enter.native="searchPage">
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" @click="searchPage">查询</el-button>
              <el-button icon="el-icon-refresh" @click="refresh">重置</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </div>

      <!-- 表格区域 -->
      <div class="table-area">
        <el-card shadow="never">
          <el-table
            v-loading="loading"
            :data="tableData"
            stripe
            style="width: 100%">
            <el-table-column
              prop="content"
              label="评论内容"
              min-width="200"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              prop="createBy"
              label="评论人"
              width="120">
            </el-table-column>
            <el-table-column
              prop="createTime"
              label="评论时间"
              width="160"
              align="center">
            </el-table-column>
            <el-table-column
              label="操作"
              width="100"
              align="center">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.row)">
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>

          <!-- 分页 -->
          <div class="pagination-container">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="search.pageNumber"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="search.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
            </el-pagination>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
  import {getSysCommentsPage, removeSysComments} from '../../../api/api' 
  export default {
    data() {
      return {
        loading: true,
        search: {
          content: "",
          createBy: "",
          attractionsId: "",
          pageNumber: 1,
          pageSize: 10
        },
        total: 0,
        tableData: []
      }
    },
    methods: {
      searchPage() {
        this.search.pageNumber = 1
        this.query()
      },
      query() {
        this.loading = true
        getSysCommentsPage(this.search).then(res => {
          if(res.code == 1000) {
            this.tableData = res.data.records
            this.total = res.data.total
          } else {
            this.$message.error(res.message)
          }
          this.loading = false
        })
      },
      refresh() {
        this.search.content = ""
        this.search.createBy = ""
        // 保持景点ID不变，只重置其他搜索条件
        this.query()
      },
      handleCurrentChange(val) {
        this.search.pageNumber = val
        this.query()
      },
      handleSizeChange(val) {
        this.search.pageSize = val
        this.query()
      },
      handleDelete(row) {
        this.$confirm('确定要删除这条评论吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.deleteDate(row.id)
        }).catch(() => {})
      },
      deleteDate(ids) {
        removeSysComments({ids: ids}).then(res => {
          if(res.code == 1000) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.query()
          } else {
            this.$message.error(res.message)
          }
        })
      },
    },
    created() {
      // 从路由参数中获取景点ID
      const attractionsId = this.$route.query.id
      if (attractionsId) {
        this.search.attractionsId = attractionsId
      }
    },
    mounted() {
      this.query()
    }
  }
</script>

<style lang="scss" scoped>
._comments {
  padding: 20px;
  background: #f5f7fa;
  min-height: 100%;

  .page-container {
    .search-area {
      margin-bottom: 20px;

      .el-form {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 16px;

        .el-form-item {
          margin-bottom: 0;
          
          &:last-child {
            margin-right: 0;
          }
        }
      }
    }

    .table-area {
      .el-table {
        margin-bottom: 16px;
      }
    }
  }

  .pagination-container {
    padding: 10px 0;
    text-align: right;
  }

  // 卡片样式优化
  .el-card {
    border-radius: 8px;
    border: none;

    &.is-always-shadow {
      box-shadow: 0 1px 4px rgba(0,21,41,.08);
    }

    .el-card__body {
      padding: 20px;
    }
  }

  // 表格样式优化
  .el-table {
    border-radius: 8px;
    overflow: hidden;

    th {
      background: #fafafa;
      color: #1f2d3d;
      font-weight: 500;
    }

    td {
      color: #606266;
    }
  }

  // 按钮样式优化
  .el-button {
    &.el-button--small {
      padding: 9px 15px;
    }

    &.el-button--mini {
      padding: 7px 12px;
    }
  }
}
</style>